<template>
    <input placeholder="" id="eqInput" v-model="content"><button v-if="isShow" @click="del" id="delbtn">×</button>
    </input>
</template>

<script setup>
import { ref, computed, useAttrs } from 'vue'
const attrs = useAttrs()
const content = ref('')
// 高
const height = computed(() => {
    if (attrs.size === 'small') {
        return '20px'
    } else if (attrs.size === 'middle') {
        return '30px'
    } else if (attrs.size === 'large') {
        return '40px'
    }
    return '30px'
})
// 宽
const width = computed(() => {
    if (attrs.size === 'small') {
        return '100px'
    } else if (attrs.size === 'middle') {
        return '150px'
    } else if (attrs.size === 'large') {
        return '200px'
    }
    return '50px'
})
// 字体大小
const fontSize = computed(() => {
    if (attrs.size === 'small') {
        return '10px'
    } else if (attrs.size === 'middle') {
        return '15px'
    } else if (attrs.size === 'large') {
        return '20px'
    }
    return '15px'
})
// 边框宽度
const bdWidth = computed(() => {
    if (attrs.size === 'small') {
        return '1px'
    } else if (attrs.size === 'middle') {
        return '2px'
    } else if (attrs.size === 'large') {
        return '3px'
    }
    return '50px'
})
// 按钮的显隐
const isShow = computed(() => {
    if (attrs.clearable === '') {
        return true
    }
    return false
})
// 清空输入框
const del = () => {
    content.value = ''
}
</script>

<style lang="scss" scoped>
#eqInput {
    height: v-bind(height);
    width: v-bind(width);
    font-size: v-bind(fontSize);
    border-width: v-bind(bdWidth);
}
#delbtn {
    position: absolute;
    left: 130px;
    top: 69px;
}
</style>